<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-17 16:59:59
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 19:57:36
 * @FilePath: \郭招娣\app\src\views\KnowledgeDrawer\KnowledgeDrawer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
 <div>
   <el-upload
    class="avatar-uploader"
    :action="action"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar"  style="width: 100%; height: 200px"/>
    <el-icon v-else class="avatar-uploader-icon"><UploadFilled /></el-icon>
  </el-upload>

   <div class="img-card">
      <div class="card-item" v-for="(v, i) in data" :key="i">
        <img :src="v.url" alt="" style="width: 100%;height:100px" />
      </div>
    </div>
    <!-- {{data}} -->
 </div>
</template>

<script>
import { UploadFilled } from "@element-plus/icons-vue";
import { imgList } from '../../api/knowledge'
export default {
  components: {
    UploadFilled,
  },
  props: {
    innerDrawer: {
      type: Boolean,
      default: false,
    },
  },
  
  data(){
    return {
      action:'/api/knowUpload',
      imageUrl: '',
      data:[]
    }
  },
  created(){
    this.init()
  },
  methods: {
    init(){
      this.upload()
    },
    open() {
        this.$emit('open',true)
    },
    // 列表
    // async upload(){
    //   const res=await imgList('/knowList');
    //   this.data=res.data.urlList;
    // },
     async upload() {
      const res = await imgList("/knowList");
      this.data = res.data.urlList;
    },
    // 上传
     handleAvatarSuccess(res) {
        this.imageUrl = res.result.url;
      },
     
  },
 
};
</script>
<style scoped>
.img-card {
  display: flex;
  flex-wrap: wrap;

}
.card-item {
  width: 25%;
  border: 1px solid #ddd;
  padding: 10px;
 
}
</style>